﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>节点的操作</title>
    <style type="text/css">
      body {
        margin: 0px auto;
        font-size: 12px;
        line-height: 20px;
        background-color: cornsilk;
      }
      #like {
        width: 70%;
        border-radius: 10px;
        background: url(./images/bg.png) no-repeat left bottom;
        background-color: rgb(252, 247, 247);
        padding-top: 10px;
        padding-left: 200px;
        margin: 10px auto;
        border: 1px dashed rgb(252, 199, 199);
      }
      h1 {
        color: rgb(0, 128, 96);
        font-size: 24px;
        margin-top: 20px;
      }
      #like button {
        background-color: rgb(0, 128, 96);
        color: #fff;
        border: 0;
        width: 150px;
        height: 30px;
        font-size: 14px;
        margin: 10px 10px 20px 20px;
      }
      input[type="text"] {
        margin-top: 5px;
        border: 1px solid #ccc;
        background-color: rgb(237, 253, 249);
        height: 25px;
      }
      input[type="text"]:focus {
        border: 0;
        outline: none;
        border: 1px solid rgb(0, 128, 96);
      }
      input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin-top: 5px;
      }
      ul li {
        list-style: none;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id="like">
      <h1 id="love">选择你喜欢的水果：</h1>
      <ul id="fruit">
        <li><input type="checkbox" />苹果</li>
        <li><input type="checkbox" />香蕉</li>
        <li><input type="checkbox" />葡萄</li>
        <li><input type="checkbox" />香梨</li>
        <li><input type="checkbox" />西瓜</li>
      </ul>
      <h3>添加水果</h3>
      <input type="text" name="" id="addfruit" />
      <button id="addFruit">添加水果</button>
      <button id="removeFruit">删除水果</button>
    </div>
    <script>
      //添加水果
      //1.给添加水果按钮设置点击事件
      document.querySelector('#addFruit').onclick = function(){
        //2.获取用户输入的内容
        var fruit = document.querySelector('#addfruit').value;
        //3.创建文本节点
        var fruitNode = document.createTextNode(fruit);
        //4.创建li元素节点
        var liNode = document.createElement('li');
        //5.创建input元素节点
        var inputNode = document.createElement('input');
        //6.给input节点设置属性
        inputNode.setAttribute('type','checkbox');
        //7.将input节点和文本节点添加到li中
        liNode.appendChild(inputNode);
        liNode.appendChild(fruitNode);
        //8.将li节点添加到ul中
        document.querySelector('#fruit').appendChild(liNode);
        //9.清除用户输入的内容
        document.querySelector('#addfruit').value = '';
      }
      //删除水果
      document.querySelector('#removeFruit').onclick = function(){
        //获取当前页面中所有的input标签
        var ul = document.querySelector('#fruit');
        var checkboxs = ul.querySelectorAll("input[type='checkbox']")
        //遍历所有的input标签
        for(var i=0;i<checkboxs.length;i++){
          //判断当前input是否被选中
          if(checkboxs[i].checked){
            //当复选框被选中则删除  checkboxs.parentNode  当前复选框被选中的li标签
            ul.removeChild(checkboxs[i].parentNode);
          }
        }
      }

      
    </script>
  </body>
</html>
